<template>
	<view>
		<view>
			<image src="../../static/lunbo.png" style="height: 100px;width: 100%;"></image>
			<view class="tu" style="display: flex;">
				<u--input placeholder="" type="number" v-model="simka"></u--input>
				<u-button type="defalut" size="mini" text="查询" color=" #1eb9ee"
					style="width: 30px; height: 38px;margin-left: 10px;"  @click="querycard()"></u-button>
			</view>

			<view :class="checkid==item.id?'card checkcard':'card'" v-for="(item,index) in cardlist" :key="index"
				@click="buyCard(item.id,item.number)">
				<view class="card-left">
					<!-- <view>编号</view> -->
					<view>号码</view>
					<view>价格(kips)</view>
					<view>状态</view>
				</view>
				<view class="card-right">
					<!-- <view>{{item.id}}</view> -->
					<view>{{item.number}}</view>
					<view>{{item.price}}</view>
					<view>{{item.status==0?'待售':'已售'}}</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import { getResponseData, showToastTip,getBaseUrl,getWsUrl} from "@/api/req.js";
	export default {
		data() {
			return {
				simka: '',
				checkid: '',
				pageIndex: 1,
				cardlist: []
			}
		},
		onLoad() {
			this.getsimka();
		},
		onReachBottom() {
		        console.log("上拉加载更多")
				this.pageIndex++;
				this.getsimka();
				//模拟数据请求
				// setTimeout(() => {
				// 		this.cardlist.push(...this.cardlist,...this.cardlist);
				// }, 2000)
		    },
		methods: {
			buyCard(id,number) {
				let that = this;
				this.checkid = id;
				uni.showModal({
				        title: '购买',
				        content: '确认选择'+number+'这个号码吗？',
						confirmText:this.$t('app.qd'),
						cancelText:this.$t('app.qx'),
				        success: function(res) {
				        if (res.confirm) {
				            // 执行确认后的操作
							getResponseData("/etlSim/buyEtlSim"
							, 'get',{
								id:id
							}, function(res) {
								if (res.code == 200) {
									uni.showToast({
										title: res.msg,
										icon: 'success',
										duration: 2000
									})
									that.getsimka();
								}else{
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									})
								}
							});
				        } 
				        else {
				            // 执行取消后的操作
				        }
				    }
				})
			},
			querycard(){
				this.pageIndex=1;
				this.cardlist=[];	
				this.getsimka();
				
				// uni.showModal({
				//         title: '购买',
				//         content: '你查询的号码是	'+this.simka,
				//         success: function(res) {
				//         if (res.confirm) {
				//             // 执行确认后的操作
				//         } 
				//         else {
				//             // 执行取消后的操作
				//         }
				//     }
				// })
			},
			getsimka(){
				var that = this;
				// 得到用户数据
				getResponseData("/etlSim/getEtlSimByPage"
				, 'get',{
					limit:10,
					page:this.pageIndex,
					phone:this.simka
				}, function(res) {
					if (res.code == 200) {
					that.cardlist.push(...res.data);
					// console.log(that.cardlist);
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
					}
				});
			}
			
		}
	}
</script>

<style>
	page {
		/* background-color: #F0F0F0; */
	}

	.tu {
		width: 475rpx;
		margin: 10px auto;
	}

	.card {
		width: 90%;
		margin: auto;
		border: 1px #1eb9ee solid;
		border-radius: 5px;
		margin-top: 20px;
		display: flex;
		justify-content: space-around;
		padding: 10px 0px;
	}

	.checkcard {
		border: 1px #016fb6 solid !important;
		background-color: rgba(0, 0, 255, .1);
	}

	.card-left {
		color: gray;
	}
</style>